<!DOCTYPE html>
<html lang="en">
{% load AppBase_tag %}
<head>
    <title>{% sitetitle_tag %}</title>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet"
          href="/static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="/static/vendors/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="/static/vendors/bootstrap/css/bootstrap.min.css">
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="/static/vendors/animate.css/animate.css">
    <link type="text/css" rel="stylesheet" href="/static/vendors/iCheck/skins/all.css">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="/static/css/themes/style1/pink-blue.css" class="default-style">
    <link rel="stylesheet" type="text/css" href="/static/css/verify.css">
</head>

<body id="signup-page">
<div class="page-form">
    <form id="findpsd-form" action="#" class="form" method="post">
        <div class="header-content">
            <h1>找回密码</h1>
        </div>
        <div class="body-content">
            <div class="form-group">
                <div class="input-icon right"><i class="fa fa-envelope"></i>
                    <input type="email" placeholder="邮箱" name="email" class="form-control">
                </div>
            </div>

            <hr>

            <div class="form-group">
                <div id="mpanel2"></div>
            </div>


            <hr>
            <div class="form-group mbn"><a href="login" class="btn btn-warning"><i
                    class="fa fa-chevron-circle-left"></i>&nbsp;
                返回</a>
                <button type="button" id="check-btn" class="btn btn-info pull-right">确定 &nbsp;
                    <i class="fa fa-chevron-circle-right"></i>
                </button>
            </div>
        </div>
    </form>
    <div id="modal-alert" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>温馨提示</h4>
                </div>
                <div class="modal-body">
                    <h4 id="message" style="text-align: center"></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-primary">Ok</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-alert-error" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" aria-hidden="true"
                            class="close">&times;
                    </button>
                    <h4 id="modal-default-label" class="modal-title">温馨提示</h4>
                </div>
                <div class="modal-body" style="color: red;"><h4 id="errormessage" style="text-align: center"></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-primary">Ok</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<!--loading bootstrap js-->
<script src="/static/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="/static/vendors/jquery-validate/jquery.validate.min.js"></script>
<script src="/static/js/html5shiv.js"></script>
<script src="/static/js/respond.min.js"></script>
<script src="/static/js/extra-signup.js"></script>
<script src="/static/vendors/iCheck/icheck.min.js"></script>
<script src="/static/vendors/iCheck/custom.min.js"></script>
<script type="text/javascript" src="/static/js/verify.js"></script>
<script>
    //BEGIN CHECKBOX & RADIO
    $('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_minimal-grey',
        increaseArea: '20%' // optional
    });
    $('input[type="radio"]').iCheck({
        radioClass: 'iradio_minimal-grey',
        increaseArea: '20%' // optional
    });
    //END CHECKBOX & RADIO
    $('#mpanel2').codeVerify({
        type: 1,
        width: '400px',
        height: '50px',
        fontSize: '30px',
        codeLength: 6,
        btnId: 'check-btn',
        ready: function () {
        },
        success: function () {

            var data = new FormData($('#findpsd-form')[0]);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "{% url 'findpassword' %}", true);  //请将url改成上传url
            xhr.setRequestHeader('X-CSRFTOKEN', '{{ request.COOKIES.csrftoken }}');   //此处为Django要求，可无视，或者换成相应后台所要求的CSRF防护，不是django用户请去掉
            xhr.send(data);   //发送表单
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 || xhr.readyState == "complete") {
                    var resdata = JSON.parse(xhr.responseText);
                    console.log(resdata);
                    if (resdata.code == 200) {
                        document.getElementById("message").innerHTML = resdata.message;
                        $('#modal-alert').modal('show');
                    } else {
                        document.getElementById("errormessage").innerHTML = resdata.message;
                        $('#modal-alert-error').modal('show');
                    }

                }

            }
        },
        error: function () {
            document.getElementById("errormessage").innerHTML = "验证码错误！";
            $('#modal-alert-error').modal('show');
        }
    });
</script>

</body>

</html>